import '../../css/squareInfo/index.scss';
import config from "./squareConfig";
import icon1 from '../../assets/image/squareInfo/icon-1.png'
import icon2 from '../../assets/image/squareInfo/icon-2.png'
import icon3 from '../../assets/image/squareInfo/icon-3.png'
import icon4 from '../../assets/image/squareInfo/icon-4.png'
import icon5 from '../../assets/image/squareInfo/icon-5.png'
import icon6 from '../../assets/image/squareInfo/icon-6.png'
import icon7 from '../../assets/image/squareInfo/icon-7.png'
import arrow from '../../assets/image/squareInfo/arrow.png'

import location from '../../assets/image/squareInfo/location.png'

import Layout from "../../components/layout";
import utils from "../../utils"

export default class Index extends React.PureComponent {
    constructor(props) {
        super(props);
        let propsId = this.props.match.params.id;
        this.state = {
            squareInfo: config[propsId]
        }
    }
    componentDidMount() {
        this.domEvent();
    }
    domEvent() {
        $(window).scroll(function () {
            let logoContent = utils.getViewPort("logoContent");
            if (logoContent) {
                $(".label-list-item").addClass("flipInY");
            }
        })
    }
    componentWillUnmount() {
        $(window).unbind('scroll');
    }
    componentWillReceiveProps(nextProps) {
        let propsId = this.props.match.params.id;
        let nextPropsId = nextProps.match.params.id;
        if (propsId != nextPropsId) {
            this.setState({
                squareInfo: config[nextPropsId]
            })
        }
    }

    goBusiness = () => {
        this.props.history.push({
            pathname: `/business`,
        })
    };
    render() {
        const { squareInfo } = this.state;
        return (
            <Layout nav="squareInfo" {...this.props}>
                <div className={'square-info'}>
                    <div className={'top-background'}>
                        <img src={squareInfo.banner} alt="" style={{ width: 'auto', height: '48vh' }} />
                    </div>
                    <div className={'info-container'}>
                        <div style={{ width: 1200, margin: "0 auto" }}>
                            <div className={'basicInfo-container'}>
                                <div className={'left-info-container'}>
                                    <div className={'left-info-titleList'}>
                                        <span className={'left-info-title'}>{squareInfo.squareName}</span>
                                        <span className={'right-info-titleList'}>
                                            <img style={{ marginRight: 12 }} src={location} alt="" />{squareInfo.location}
                                        </span>
                                    </div>
                                    <div className={'icon-list'}>
                                        <span className={'right-info-titleList'} style={{ marginRight: 60 }}>
                                            <img style={{ marginRight: 12 }} src={icon1} alt="" />{squareInfo.schoolNum}+学校及幼儿园
                                </span>
                                        <span className={'right-info-titleList'} style={{ marginRight: 60 }}>
                                            <img style={{ marginRight: 12 }} src={icon2} alt="" />{squareInfo.houseNum}+楼盘
                                </span>
                                        <span className={'right-info-titleList'}>
                                            <img style={{ marginRight: 12 }} src={icon3} alt="" />{squareInfo.popNum}万+常驻人口
                                </span>
                                    </div>
                                    <p className={'info-introduce'}>
                                        {squareInfo.detail}
                                    </p>
                                </div>
                                <div className={'right-info-container'}>
                                    <img src={squareInfo.rightImg} alt="" />
                                </div>

                            </div>
                            <div className={'img-list'}>
                                {squareInfo.imgList.map((item, index) => {
                                    return <img key={index} src={item} alt="" className={'list-img'} />
                                })}
                            </div>
                            <div className={'service-container'}>
                                <div className={'left-info-container'}>
                                    <div className={'left-info-titleList'}>
                                        <span className={'left-info-title'}>服务及设施</span>
                                    </div>
                                </div>
                                <div className={'service-list'} >
                                    <div className={'list-item'} style={{ marginBottom: 61 }}>
                                        <div className={'list-item-title'}>
                                            <div style={{ width: 40, marginRight: 40 }}>
                                                <img className={'list-item-icon'} src={icon4} alt="" />

                                            </div>
                                            <span>教学设施</span>

                                        </div>
                                        <span className={'list-item-childList'}>
                                            {squareInfo.facilitiesList.map((item, index) => {
                                                return <span key={index} className={'list-item-element'}>{item}</span>
                                            })}
                                        </span>
                                    </div>
                                    <div className={'list-item'} style={{ marginBottom: 61 }}>
                                        <div className={'list-item-title'}>
                                            <div style={{ width: 40, marginRight: 40 }}>
                                                <img className={'list-item-icon'} src={icon5} alt="" />

                                            </div>
                                            <span>基础设施</span>
                                        </div>
                                        <span className={'list-item-childList'}>
                                            {squareInfo.basicList.map((item, index) => {
                                                return <span key={index} className={'list-item-element'}>{item}</span>
                                            })}
                                        </span>
                                    </div>
                                    <div className={'list-item'} style={{ marginBottom: 61 }}>
                                        <div className={'list-item-title'}>
                                            <div style={{ width: 40, marginRight: 40 }}>
                                                <img className={'list-item-icon'} src={icon6} alt="" />

                                            </div>
                                            <span>运营服务</span>
                                        </div>
                                        <span className={'list-item-childList'}>
                                            {squareInfo.serviceList.map((item, index) => {
                                                return <span key={index} className={'list-item-element'}>{item}</span>
                                            })}
                                        </span>
                                    </div>
                                    <div className={'list-item'}>
                                        <div className={'list-item-title'}>
                                            <div style={{ width: 40, marginRight: 40 }}>
                                                <img className={'list-item-icon'} src={icon7} alt="" />
                                            </div>
                                            <span>互联网技术服务</span>
                                        </div>
                                        <span className={'list-item-childList'}>
                                            {squareInfo.internetServiceList.map((item, index) => {
                                                return <span key={index} className={'list-item-element'}>{item}</span>
                                            })}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className={'label-container'}>
                                <div id="logoContent" className={'left-info-container'}>
                                    <div className={'left-info-titleList'}>
                                        <span className={'left-info-title'}>已入驻的品牌</span>
                                    </div>
                                </div>
                                <div className={'label-list'}>
                                    {squareInfo.labelList.map((item, index) => {
                                        return (
                                            <li key={`label-img-${index}`} className={'vivify duration-1000 label-list-item'}>
                                                <img src={item} alt="" />
                                            </li>
                                        )
                                    })}
                                </div>
                            </div>
                            <div className={'button-container'}>
                                <button className={'main-button'} onClick={this.goBusiness}>我要入驻 <img src={arrow} alt="" /><img src={arrow} alt="" /></button>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        )
    }
}